<!-- staffInfo -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'staff',
          name: 'Staff',
        },
        {
          routeName: 'Ada Yeo',
          name: 'Ada Yeo',
        },
        {
          name: 'Personal info',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="Staff">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      <div><router-link to="/staff">staff-index</router-link></div>
      <div><router-link to="/staffInfoEdit">staffInfoEdit</router-link></div>
      <div><router-link to="/staff">Privileges</router-link></div>
      </template>
      <GgPageHeader
        title="Ada Yeo"
        :menuData="['Reset password', 'Edit', 'Delete', 'Archive']"
        subTitle1="ABCDE1234@email.com"
      >
        <div
          slot="title-label"
          class="title-label"
          @click="viewLocations = true"
        >
          <span>{{ viewLabel }}</span>
          <img
            v-if="checkedData.length > 1"
            class="icon-view"
            src="@/assets/images/icons/icon-view.png"
            alt=""
          />
        </div>
        <div slot="avatarHeader" class="avatar">
          <head-img class="imgBox" :src="userInfo.avatar" line-height="52" />
        </div>
        <div slot="info">
          <div class="title-status mar-b-0">Active</div>
        </div>
      </GgPageHeader>
      <Section title="Profile" :hasFooter="true">
        staff-info
        <!-- <TablePanel
          :data="[
            { label: 'First Name', value: 'xxx xxx' },
            { label: 'Last Name', value: 'xxx xxx' },
            { label: 'Email', value: 'xxx' },
            { label: 'Phone', value: 'xxxxxx' },
            { label: 'Job title', value: 'xxx' },
            { label: 'Working type', value: 'xxx' },
          ]"
        ></TablePanel> -->
        <!-- <ul class="cardcontent-info">
          <li>
            <div class="lable">Company info</div>
            <div class="info-wrapper">
              <ul class="info-wrapper-default">
                <li>
                  <div class="info-wrapper-l">Name</div>
                  <div class="info-wrapper-r">
                    EDOOVO International Pte. Ltd.
                  </div>
                </li>
                <li>
                  <div class="info-wrapper-l">Registration no.</div>
                  <div class="info-wrapper-r">201930190Z</div>
                </li>
                <li>
                  <div class="info-wrapper-l">Address</div>
                  <div class="info-wrapper-r">
                    60 Paya Lebar Square Avenue 6 #10-16 Paya Lebar Square
                    Singapore 409051
                  </div>
                </li>
                <li>
                  <div class="info-wrapper-l">Email</div>
                  <div class="info-wrapper-r">enquiry@raffleskidz.com</div>
                </li>
                <li>
                  <div class="info-wrapper-l">Phone</div>
                  <div class="info-wrapper-r">+65 65478987</div>
                </li>
              </ul>
            </div>
            <i
              class="iconfont iconedit"
              @click="
                () => {
                  this.$router.push('/staffInfoEdit');
                }
              "
            ></i>
          </li>
        </ul> -->
      </Section>
    </GgPage>
    <!-- view locations -->
    <gg-Dialog
      :append-to-body="false"
      :visible.sync="viewLocations"
      :show-close="true"
      title="Locations"
    >
      <div class="dialog-content">
        <CheckboxGroup
          :checkTitle="checkTitle"
          :checkedData="checkedData"
          :checkboxList="checkboxList"
          @check="handleCheck"
        />
      </div>
    </gg-Dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      menuDatas: [
        {
          name: "Personal info",
          key: "personalInfo",
          active: true,
          children: [],
        },
        {
          name: "App access",
          key: "appAccess",
        },
      ],
      activeIndex: "personalInfo",
      userInfo: {
        avatar: require("@/assets/logo.png"),
        firstName: "Dierdre",
        lastName: "Hu",
        email: "Dierdre.hu@edoovo.com",
      },
      viewLocations: false,
      checkTitle: "Raffles Kidz International",
      checkedData: ["Yio Chu Kang", "Bukit Panjang"],
      checkboxList: ["Yio Chu Kang", "Bukit Panjang", "Punggol", "Jurong West"],
    };
  },
  computed: {
    viewLabel() {
      let checkedDataLen = this.checkedData.length,
        checkboxListLen = this.checkboxList.length;
      if (checkedDataLen == 1) {
        return this.checkedData[0];
      } else if (checkedDataLen == checkboxListLen) {
        return "All  locations";
      } else {
        return checkedDataLen + "locations";
      }
    },
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
      this.$router.push({ name: item.key });
    },
    handleCheck(val) {
      this.checkedData = val;
      // console.log(this.locations);
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
/deep/ .section-main {
  padding: 0;
}
/deep/ .el-dialog__body {
  max-height: 412px;
  overflow-y: auto;
}
</style>